<!DOCTYPE html>
<html>
<head>
	<title> 4-1 使用组件的细节点</title>
	<script type="text/javascript" src="../../vue.js"></script>
</head>
<body>
	<!-- 
		知识点一:
		  使用 is = '模板名' 语法解决使用模板带来的错误
	 -->
	<!-- <div id='root'>
		<table>
			<tbody>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
				</tr>
			</tbody>
		</table>
	</div> -->

	<div id='root'>
		<table>
			<tbody>
					<!-- 使用这种方式你会发现浏览器无法解析,导致tr td出现在table外面 -->
					<!-- <row></row> -->
					<!-- 
						解决:使用is语法 ,同理 ul、ol、select都是一样的
					 -->
					 <tr is='row'></tr>
					 <tr is='row'></tr>
					 <tr is='row'></tr>
			</tbody>
		</table>
	</div>
	<script type="text/javascript">
		Vue.component('row',{
			/**
			 * 知识点二:在子组件里定义data,data必须是一个函数
			 * data:{content:123},在组件里定义数据的话不能直接定义对象,
				要定义一个函数并返回,如下:
			 */
			data:function(){
				return {
					content:123
				}
			},
			template:"<tr><td>{{content}}</td></tr>"
		})

		var vm = new Vue({
			el:'#root'
		})
	</script>
</body>
</html>